<style scoped>
  h4, li{
    text-align: center;
  }
  li img{
    max-width: 100px;
  }
  .button{
    margin: 0 20px;
  }
</style>
<template>
  <main>
    <h4 class="title is-4">设置网站</h4>
    <section class="box">
      <div class="block">
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">模式</label>
          </div>
          <div class="control">
            <div class="select is-fullwidth" style="max-width: 200px">
              <select v-model="param.type">
                <option value="0">无域名</option>
                <option value="1">域名指向</option>
              </select>
            </div>
          </div>
        </div>
        <div class="control is-horizontal" v-if="param.type == 1">
          <div class="control-label">
            <label class="label">域名</label>
          </div>
          <div class="control">
            <div class="control is-fullwidth">
              <input class="input" v-model="param.www" type="text">
            </div>
          </div>
        </div>
      </div>
    </section>
    <h4 class="title is-4">选择网站框架类型</h4>
    <section>
      <ul class="tile is-ancestor animated">
        <li class="tile is-parent is-4" v-for="item in parentList" @click="_set(item.type)">
          <article class="tile is-child box">
            <h6 class="title is-5">{{item.name}}</h6>
            <img src="../assets/img/tpl.png" alt="">
            <p>{{item.description}}</p>
          </article>
        </li>
      </ul>
    </section>
    <modal  :visible="visible" @close="close">
      <section class="box">
        <h4 class="title is-5">选定框架将不可修改,是否确认?</h4>
        <div style="text-align: center">
          <button class="button" @click="save">保存</button>
          <button class="button">还原</button>
        </div>
      </section>
    </modal>
  </main>
</template>

<script>
  import { Modal } from 'vue-bulma-modal'
  import { mapGetters, mapActions } from 'vuex'

  export default {
    data () {
      return {
        param:{
          www:'',
          type:0,
        },
        visible:false,
        parentList:[{
          type:'nor',
          name:'普通框架模板',
          description:'居中1000px,正常banner导航'
        },{
          type:'all',
          name:'整屏框架模板',
          description:'首页平铺,banner整屏切换'
        },{
          type:'wx',
          name:'微信框架模块',
          description:'手机页面,扁平化响应式模块'
        }]
      }
    },
    methods: {
      ...mapActions([
        'toggleSidebar',
        'toggleSidebars'
      ]),

      _set () {
        this.visible = true
      },
      save () {
        let vm = this
        this.close()
        setTimeout(function(){
          vm.$router.push('tpl')
        },100)
      },
      close () {
        this.visible = false
      }
    },
    computed:  mapGetters({
      sidebar: 'sidebar',
      tpl: 'tpl'
    }),
    components: { Modal },
    mounted () {
      let vm = this
      this.toggleSidebars(true)
      vm.$parent.$parent.$refs.nav.status = false
    }
  }
</script>
